<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:84:"D:\phpStudy\WWW\wap\public/../application/index\view\zhongchuang\makerspacelist.html";i:1513649769;}*/ ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="js/base.js"></script>
    <title>注册地址</title>
    <link rel="stylesheet" href="css/base.css">
    <script src="js/jquery-1.11.1.min.js"></script>
    <!--<script src="js/index.js"></script>-->
</head>
<body>
<section class="wrap">
    <div class="search">
        <div id="validation">
            <input type="text" class="input-box" value="请输入搜索关键字">
            <div class="refer"></div>
        </div>
        <div class="cancel">取消</div>
    </div>
    <div id="filter">
       <ul class="tab">
           <li  class="tab-item " id="location">
                   <span>位置</span>
                   <img src="images/arrow_down.png"/>
           </li>
           <li  class="tab-item" id="rent">
               <span>租金</span>
               <img src="images/arrow_down.png"/>
           </li>
           <li  class="tab-item" id="stamp">
               <span>类型</span>
               <img src="images/arrow_down.png"/>
           </li>
       </ul>
        <div id="selected">
            <div class="sel-location">
                <ul class="sel-province">
                    <li class="active"><span>北京</span></li>
                    <li><span>天津</span></li>
                    <li><span>上海</span></li>
                    <li><span>重庆</span></li>
                    <li><span>四川</span></li>
                    <li><span>河北</span></li>
                </ul>
                <ul  class="sel-city">
                    <li class="active"><span>北京市</span></li>
                </ul>
                <ul class="sel-area">
                    <li><span>朝阳区</span></li>
                    <li><span>海淀区</span></li>
                    <li><span>东城区</span></li>
                    <li><span>西城区</span></li>
                    <li><span>丰台区</span></li>
                    <li><span>大兴区</span></li>
                </ul>
            </div>
            <div class="sel-rent">
                <ul >
                    <li ><span>111</span></li>
                    <li class="active"><span>222</span></li>
                    <li><span>333</span></li>
                    <li><span>444</span></li>
                    <li><span>555</span></li>
                    <li><span>777</span></li>
                </ul>
            </div>
            <div class="sel-stamp">
                <ul >
                    <li ><span>写字楼</span></li>
                    <li class="active"><span>民族</span></li>
                    <li><span>的地方</span></li>
                    <li><span>似懂非懂是</span></li>
                    <li><span>5递四方速递55</span></li>
                    <li><span>水电费</span></li>
                </ul>
            </div>
        </div>
       <div class="register_tab">
           <ul>
               <li >
                   <a href="makerSpaceInfo.html">
                     <div><img src="images/kognjian1.png" ></div>
                     <div>
                         <span >授课大厦写字楼</span>
                         <span>地址:北京市丰台区</span>
                     </div>
                     <div>33333元/月</div>
                 </a>
               </li>
               <li >
                   <a href="makerSpaceInfo.html">
                       <div><img src="images/kognjian2.png" ></div>
                       <div>
                           <span >授课大厦写字楼</span>
                           <span>地址:北京市丰台区</span>
                       </div>
                       <div>33333元/月</div>
                   </a>
               </li>
               <li >
                   <a href="makerSpaceInfo.html">
                      <div><img src="images/kognjian3.png" ></div>
                      <div>
                          <span >授课大厦写字楼</span>
                          <span>地址:北京市丰台区</span>
                      </div>
                      <div>33333元/月</div>
                  </a>
               </li>
               <li >
                   <a href="makerSpaceInfo.html">
                      <div><img src="images/kognjian4.png" ></div>
                      <div>
                          <span >授课大厦写字楼</span>
                          <span>地址:北京市丰台区</span>
                      </div>
                      <div>33333元/月</div>
                  </a>
               </li>
           </ul>
       </div>
    </div>

</section>
</body>
<script>
 $(function(){
     $('.tab-item').on('click',function(){
         if($(this).hasClass('active')){
             $('.tab-item').removeClass('active');
             $('.tab-item').children('img').attr('src','images/arrow_down.png');
             $('#selected div').removeClass('active_location');
         }else {
             $('#selected div').removeClass('active_location');
             $('.tab-item').removeClass('active');
             $('.tab-item').children('img').attr('src','images/arrow_down.png');
             $(this).addClass('active');
             $(this).children('img').attr('src','images/selected.png');
             var selected = $(this).attr('id');
             if(selected == 'location'){
                 $('#filter #selected .sel-location ').addClass('active_location');
             }
             if(selected == 'rent'){
                 $('#filter #selected .sel-rent ').addClass('active_location');
             }
             if(selected == 'stamp'){
                 $('#filter #selected .sel-stamp ').addClass('active_location');
             }
         }
     });
     $('#selected .sel-stamp ul li,#selected .sel-rent ul li').on('click',function(){
         $(this).parent().children('li').removeClass('active');;
         $(this).addClass('active');
         $(this).parent().parent().removeClass('active_location');
         $('.tab-item').children('img').attr('src','images/arrow_down.png');
         $('.tab-item').removeClass('active');
         var className  = $(this).parent().parent().attr('class');
         if(className == 'sel-rent'){
             $('#rent span').html($(this).children('span').text());
         }
         if(className == 'sel-stamp'){
              $('#stamp span').html($(this).children('span').text());
         }

     });
     $('#selected .sel-location .sel-province li,#selected .sel-location .sel-city li').on('click',function(){
         $(this).parent().children('li').removeClass('active');;
         $(this).addClass('active');
     });
     $('#selected .sel-location .sel-area li').on('click',function(){
         $('.tab-item').children('img').attr('src','images/arrow_down.png');
         $('.tab-item').removeClass('active');
         $(this).parent().children('li').removeClass('active');;
         $(this).addClass('active');
         $(this).parent().parent().removeClass('active_location');
         $('#location span').html($(this).children('span').text());
     });
 });
</script>
</html>